<template>
  <div class="Login">
    <div id="DynamicClock" style="height: 300px" ></div>
        <template>
          <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="60" style="width:25%;margin: 0 auto;">
            <FormItem>
              <div style="color:#1d1d5c;font-size:25px"><STRONG>后台管理系统登入</STRONG></div>
            </FormItem>
            <FormItem prop="username">
            <Input size="large" type="text" v-model="formCustom.username" placeholder="请输入用户名"></Input>
          </FormItem>
            <FormItem prop="password">
              <Input size="large" type="password" v-model="formCustom.password" placeholder="请输入密码"></Input>
            </FormItem>
            <FormItem>
              <Button type="warning" long @click="handleSubmit('formCustom')">登入</Button>
            </FormItem>
          </Form>
        </template>
  </div>
</template>

<script lang="ts">

  import {Component, Vue} from 'vue-property-decorator'
  import DynamicClock from '../common/DynamicClock'
  import {loginUrl} from "@/common/HttpRequestUrl";
  import Qs from 'qs'
  import router from "@/router";
  @Component
  export default class Login extends Vue {

    mounted () {
      DynamicClock();
    }
    // 用户登入表单校验
    ruleCustom = {
      username: [
        {  required: true, message: "用户名不能为空", trigger: 'blur' }
      ],
      password: [
        {  required: true, message: "密码不能为空", trigger: 'blur' }
      ]
    }
    formCustom = {
      username: '',
      password: ''
    }

    handleSubmit () {

      let data = Qs.stringify(this.formCustom)
      this.$post(loginUrl,data,{headers:{'Content-Type': 'application/x-www-form-urlencoded'},isLayer:true}).then(function (res) {
        console.log(res)
        if (res.status) {

          router.replace({
            path: 'ManagementHome',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
        }
      })
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .Login{
    width: 100%;
    height: 100vh;	/* 重点一 */
    margin: 0 auto;
    background-image: url(../assets/LoginPage.png);
    background-repeat: no-repeat;
    background-size: cover; /* 重点二 */
    overflow: auto;
    background-position:0px -300px;
  }
</style>
